<template>
	<view class="content">
		<view class="header">
			<view class="title">租地种地</view>
			<view class="search-btn">
				<u-icon name="search" color="#ffffff" size="20"></u-icon>
			</view>
		</view>
		
		<!-- 筛选标签 -->
		<view class="filter-tabs">
			<view class="tab-item" :class="{active: activeTab === 'rent'}" @click="activeTab = 'rent'">土地租赁</view>
			<view class="tab-item" :class="{active: activeTab === 'seckill'}" @click="goToSecKill">土地秒杀</view>
		</view>
		
		<!-- 农地列表 -->
		<view class="land-list" v-if="activeTab === 'rent'">
			<!-- 农地项目1 -->
			<view class="land-item" v-for="item in landItems" :key="item.fieldId">
				<image class="land-image" :src="item.fieldImage"></image>
				<view class="land-info">
					<view class="land-title">{{ item.fieldName }}</view>
					<view class="land-location">{{ item.fieldLocation }},{{ item.fieldType }}</view>
					<view class="land-price-row">
						<view class="land-price">
							<text class="price-symbol">¥</text>
							<text class="price-value">{{ item.plotPrice }}</text>
							<text class="price-unit">元/亩起</text>
						</view>
						<view class="select-btn" @click="goToDetail(item.fieldId)">选择土地</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 秒杀列表 -->
		<view class="sk-list" v-if="activeTab === 'seckill'">
			<view 
				class="sk-item" 
				v-for="(item, index) in skList" 
				:key="index"
				@click="goDetail(item.skId)"
			>
				<view class="sk-info">
					<view class="sk-name">地块秒杀 #{{item.skId}}</view>
					<view class="sk-price">
						<text class="current">¥{{item.skPrice/100}}</text>
						<text class="original">原价: ¥{{item.skPrice}}</text>
					</view>
					<view class="sk-data">
						<text>面积: {{item.area}}</text>
						<text>剩余: {{item.skNum}}块</text>
					</view>
					<view class="sk-time">
						<template v-if="item.getStatus == 0">
						<text>即将开始: </text>
						<u-count-down :time="getTimeLeft(item.skstarttime)" format="DD:HH:mm:ss" autoStart></u-count-down>
						</template>
						<template v-else-if="item.getStatus == 1">
						<text class="active">正在进行: </text>
						<u-count-down :time="getTimeLeft(item.skendtime)" format="DD:HH:mm:ss" autoStart></u-count-down>
						</template>
						<text v-else>已结束</text>
					</view>
				</view>
				<view class="sk-btn" :class="{'active': item.getStatus == 1}">
					<text v-if="item.getStatus == 0">即将开始</text>
					<text v-else-if="item.getStatus == 1" @click="goToSkillDetail(item.skId,item.getStatus)">立即抢购</text>
					<text v-else>已结束</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import request from '@/util/request.js';
	
	export default {
		data() {
			return {
				// 热点信息数据
				noticeList: [
					'可视化在线认养农场，小程序开发',
					'新鲜有机蔬果，支持定期配送到家',
					'农场开放日活动，欢迎预约参观体验'
				],
				// 轮播图数据
				bannerList: [],
				// 认养项目数据
				landItems: [],
				activeTab: 'rent',
				skList: [],
			}
		},
			methods: {
			goToSkillDetail(id,getStatus) {
				uni.navigateTo({
					url: `/pages/secondKill/tbLand?landId=${id}&getStatus=${getStatus}`
				});
			},
			getTimeLeft(time) {
				return new Date(time).getTime() - new Date().getTime();
			},
			 // 跳转到详情页
			goDetail(skId) {
				uni.navigateTo({
					url: `/pages/secondKill/detail?skId=${skId}`
				})
			},
			 // 获取秒杀列表
			getSecondKillList() {
			uni.showLoading({
				title: '加载中'
			})
			
			// 使用封装的request方法
			request({
				url: '/land-service/secondKill/selectAll',
				method: 'GET'
			}).then(res => {
				// 处理成功响应
				this.skList = res.data.list || []
				this.skList.forEach(item => {
					if(item.skendtime > new Date().getTime()){
						item.getStatus = 1;
					}else{
						item.getStatus = 1;
					}
				});
			}).catch(err => {
				console.error('获取秒杀列表失败:', err)
				uni.showToast({
				title: '获取秒杀列表失败',
				icon: 'none'
				})
			}).finally(() => {
				uni.hideLoading()
			})
			},
			goToSecKill() {
				this.activeTab = 'seckill';
				this.getSecondKillList();
			},
			goToRent() {
				this.activeTab = 'rent';
				
			},
			
			// 计算百分比
			calculatePercentage(sold, remain) {
				const total = sold + remain;
				return Math.floor((sold / total) * 100);
			},
			
			// 获取轮播图数据
			getBannerList() {
				request({
					url: '/adopt-service/adopt-banner/list',
					method: 'GET'
				}).then(res => {
					if (res.success && res.data.bannerList) {
						// 先按sort字段排序
						const sortedList = [...res.data.bannerList].sort((a, b) => a.sort - b.sort);
						// 处理图片URL，添加基础路径
						this.bannerList = sortedList.map(item => {
							return `http://121.36.197.175:19000/test/${item.bannerUrl}`;
						});
					} else {
						uni.showToast({
							title: '获取轮播图失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					console.error('获取轮播图出错', err);
				});
			},
			
			// 获取租地项目列表
			getLandList() {
				request({
					url: '/land-service/land/page',
					method: 'GET',
					data: {
						current: 1,
						size: 3
					}
				}).then(res => {
					if (res.success && res.data.landList) {
						// 处理图片URL，添加基础路径
						this.landItems = res.data.landList
						// 处理图片URL，添加基础路径
						this.landItems = res.data.landList.map(item => {
							return {
								...item,
								fieldImage: `http://121.36.197.175:19000/test/${item.fieldImage}`
							};
						});
					} else {
						uni.showToast({
							title: '获取地块失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					console.error('获取地块出错', err);
				});
			},
			// 跳转到地块详情页面
			goToDetail(id) {
				// 如果已售罄，不允许跳转
				// if (item.remain === 0) {
				// 	uni.showToast({
				// 		title: '该项目已售罄',
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				
				uni.navigateTo({
					url: `/pages/farm/fieldDetail?fieldId=${id}`
				});
			},
		},
		created() {
			// 页面创建时获取数据
			// this.getBannerList();
			this.getLandList();
		}
	}
</script>

<style>
	.content {
		width: 100%;
		background-color: #f5f5f5;
	}
	
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #4CAF50;
		color: #ffffff;
		padding: 20rpx 30rpx;
		position: relative;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.search-btn {
		background-color: rgba(255, 255, 255, 0.3);
		border-radius: 50%;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.filter-tabs {
		display: flex;
		background-color: #ffffff;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
	}
	
	.tab-item {
		flex: 1;
		text-align: center;
		font-size: 28rpx;
		color: #666;
		position: relative;
	}
	
	.tab-item.active {
		color: #4CAF50;
		font-weight: bold;
	}
	
	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: -10rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 4rpx;
		background-color: #4CAF50;
	}
	
	.land-list {
		padding: 0 20rpx;
	}
	
	.land-item {
		background-color: #ffffff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		position: relative;
	}
	
	.land-image {
		width: 100%;
		height: 300rpx;
	}
	
	.land-badge {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		background-color: rgba(76, 175, 80, 0.8);
		color: #ffffff;
		padding: 6rpx 16rpx;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		font-size: 24rpx;
	}
	
	.land-badge text {
		margin-left: 6rpx;
	}
	
	.land-info {
		padding: 20rpx;
	}
	
	.land-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	
	.land-location {
		font-size: 26rpx;
		color: #999;
		margin-bottom: 20rpx;
	}
	
	.land-price-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.land-price {
		display: flex;
		align-items: baseline;
	}
	
	.price-symbol {
		color: #FF5722;
		font-size: 28rpx;
	}
	
	.price-value {
		color: #FF5722;
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.price-unit {
		color: #999;
		font-size: 24rpx;
		margin-left: 4rpx;
	}
	
	.select-btn {
		background-color: #4CAF50;
		color: #ffffff;
		font-size: 28rpx;
		padding: 10rpx 30rpx;
		border-radius: 30rpx;
	}
	.container {
  padding: 20rpx;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #4CAF50;
  color: #ffffff;
  padding: 20rpx 30rpx;
  position: relative;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
}

.search-btn {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.filter-tabs {
  display: flex;
  background-color: #ffffff;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
}

.tab-item {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #4CAF50;
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -10rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background-color: #4CAF50;
}

.sk-list {
  margin-top: 20rpx;
}

.sk-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.sk-info {
  flex: 1;
}

.sk-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.sk-price {
  display: flex;
  align-items: baseline;
  margin-bottom: 10rpx;
}

.current {
  font-size: 36rpx;
  color: #FF5722;
  font-weight: bold;
  margin-right: 10rpx;
}

.original {
  font-size: 24rpx;
  color: #999;
  text-decoration: line-through;
}

.sk-data {
  display: flex;
  font-size: 26rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.sk-data text {
  margin-right: 20rpx;
}

.sk-time {
  font-size: 26rpx;
  color: #666;
}

.sk-time .active {
  color: #FF5722;
}

.sk-btn {
  width: 160rpx;
  height: 70rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
  border-radius: 30rpx;
  color: #999;
  font-size: 28rpx;
}

.sk-btn.active {
  background-color: #FF5722;
  color: #fff;
}

.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300rpx;
  color: #999;
}
</style> 